<template>
  <div class="user">
    <PageSearch
      :searchConfig="searchConfig"
      @handleResetClick="resetFn"
      @handleSearchClick="searchFn"
    />
    <PageContent :contentConfig="contentConfig" ref="pageContengRef">
      <template #enable="scope">
        <el-button size="small" :type="scope.row.enable === 1 ? 'primary' : 'danger'" plain>
          {{ scope.row.enable === 1 ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template #timer="scope">
        {{ formatTime(scope.row.createAt) }}
      </template>
      <template #action="scope">
        <el-button link type="primary" size="small" icon="Edit" @click="editItem(scope.row)"
          >编辑</el-button
        >
        <el-button link type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)"
          >删除</el-button
        >
      </template>
    </PageContent>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageSearch from '@/views/main/components/page-search.vue'
import PageContent from '@/views/main/components/page-content.vue'
import { searchConfig } from '../../config/search.config'
import { contentConfig } from '../../config/content.config'
import { formatTime } from '@/utils/format'
import useMainStore from '@/store/main/main'

const mainStore = useMainStore()
const pageContengRef = ref<InstanceType<typeof PageContent>>()

// 重置
function resetFn() {
  pageContengRef.value.getPageList()
}

// 搜索
function searchFn(formData: any) {
  pageContengRef.value.getPageList(formData)
}

// 编辑操作
function editItem(row: any) {
  pageContengRef.value.isShowCreateDialog = true
  pageContengRef.value.isCreate = false

  pageContengRef.value.setDialogData(row)
}

// 删除操作
function deleteItem(id: number) {
  mainStore.deletePageByIdAction(contentConfig.pageName, id)
  console.log('删除用户')
}
</script>

<style scoped lang="less">
.user {
  border-radius: 20px;
  overflow: hidden;
}
</style>
